<template>
	<div id="movieEcharts" v-bind:style="{ height: '400px' }"></div>
</template>

<script setup>//@ts-nocheck
import { onMounted, onUnmounted, inject } from "vue"
import api from '../../api/api'

// 声明定义一下echart
let echart = inject("echarts")
onMounted(() => {
	initChart()
})
onUnmounted(() => {
	echart.dispose
})
// 基础配置一下Echarts
function initChart() {
	let chart = echart.init(document.getElementById("movieEcharts"))
	// 显示加载
	chart.showLoading()
	// 封装获取对应评论的方法
	async function toGetData() {
		return await api.get(`/admin/movie`).then((res) => {
			let data = {}
			// 循环二维数组 取出对应类型并计数
			res.data.rows.forEach(x => {
				let arr = x.movieCategory.split(",")
				arr.forEach(tag => {
					// 给对应tag计数
					if (data[tag]) {
						data[tag]++
					} else {
						data[tag] = 0
						data[tag]++
					}
				})
			})
			return data
		})
	}
	toGetData().then((res) => {
		// 关闭加载
		chart.hideLoading()
		let options = {
			color: [
				"#6596f9",
				"#6bdfaf",
				"#6f80a1",
				"#f7c125",
				"#7b6cfd",
				"#80d6f8",
				"#9d6bc0",
				"#f69647",
				'#8e44ad',
				'#2c3e50',
				'#e74c3c',
				'#f39c12'
			],
			title: [{
				x: 230,
				y: 0,
				text: '电影类型总览',
				textStyle: {
					color: '#ecf0f1',
					fontSize: 23,
					fontWeight: '600',
				},
			},],
			tooltip: {
				trigger: "item",
				formatter: "{b} : {c} {d}%",
			},
			toolbox: {
				show: true,
			},
			legend: {
				x: "10%", //水平位置，【left\center\right\数字】
				y: "center", //垂直位置，【top\center\bottom\数字】
				align: "left", //字在图例的左边或右边【left/right】
				orient: "vertical", //图例方向【horizontal/vertical】
				icon: "circle", //图例形状【circle\rect\roundRect\triangle\diamond\pin\arrow\none】
				textStyle: {
					color: "#ecf0f1",
				},
				// height:150
			},
			series: [
				{
					type: "pie",
					radius: [0, 100],
					label: {
						normal: {
							show: true,
							formatter: "{d}%",
						},
						emphasis: {
							show: true,
						},
					},
					data: [],
				},
			],
		};
		// 循环写入整合好的对象
		for (let tag in res) {
			options.series[0].data.push({ value: res[tag], name: tag })
		}
		// 配置图表
		chart.setOption(options)
	})
	window.onresize = function () {
		//自适应大小
		chart.resize()
	}
}

</script>

<style lang="scss" scoped>

</style>